<template>
	<swiper class="swiper-container" :current="activeIndex" @change="changeActiveIndex">
		<swiper-item v-for="(item, index) in labelList" :key="item._id">
			<view class="swiper-item uni-bg-red">
				<ListItem :loadData="loadData[index]" @loadMore="loadMoreData" :articleList="articleData[index]"/>
			</view>
		</swiper-item>
	</swiper>
</template>

<script>
	export default {
		name:"ArticleList",
		
		props: {
			labelList: Array,
			activeIndex: Number
		},
		
		watch: {
			labelList() {
				this._getArticleList(this.activeIndex);
				console.log("---->", this.labelList[this.activeIndex].name);
			},
			activeIndex() {
				this.page = 1;
			}
		},
		
		// created() {
			
		// },
		
		data() {
			return {
				articleList: [],
				articleData: {},
				loadData: {}, //  每一个分类的页面信息
				page: 1,
				pageSize: 6
			};
		},
		
		methods: {
			loadMoreData() {
				if(this.loadData[this.activeIndex].total === this.articleData[this.activeIndex].length) {
					this.loadData[this.activeIndex] = {
						...this.loadData[this.activeIndex],
						loading: "noMore"
					}
					console.log("flag", this.loadData[this.activeIndex]);
					this.$forceUpdate();
					return
				}
				this.loadData[this.activeIndex].page++;
				this._getArticleList(this.activeIndex);
			},
			changeActiveIndex(e) {
				const index = e.detail.current;
				this.$emit('changeActiveIndex', index);
				console.log(this.articleData[index])
				if(!this.articleData[index] || this.articleData[index].length == 0) {
					this._getArticleList(index);
				}
			},
			async _getArticleList(currentIndex) {
				if(!this.loadData[currentIndex]) {
					this.loadData[currentIndex] = {
						page: 1,
						loading: 'loading',
						total: 0
					}
				}
				const { articleList, total } = await this.$http.home.getArticleList({
					classify: this.labelList[currentIndex].name,
					page: this.loadData[currentIndex].page,
					pageSize: this.pageSize
				});
				console.log("articleList", articleList);
				// this.articleData[currentIndex] = articleList;
				
				this.articleData[currentIndex] = [...this.articleData[currentIndex] || [], ...articleList];
				
				this.loadData[currentIndex].total = total;
				
				// this.$set(this.articleData, currentIndex, articleList);
				// this.$set(this.articleData, currentIndex, articleList)
				this.$forceUpdate();
			}
		}
		
	}
</script>

<style lang="scss" scoped>
	.swiper-container {
		height: 100% !important;
		.swiper-item {
			height: 100%;
			overflow: hidden;
		}
	}
</style>